<template>
  <div>
    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in bannerlist"
             :key="item.id"
             class="swiper-slide"><img :src="item.pic"
               alt="">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" />

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev" />
      <div class="swiper-button-next" />
      <div class="nav-download">
        <div class="nav-item">
          <span class="iconfont icon-windows-fill" />
          <span>下载PC版</span>
        </div>
        <div class="nav-item">
          <span class="iconfont icon-anzhuo" />
          <span>下载Android版</span>
        </div>
        <div class="nav-item">
          <span class="iconfont icon-pingguo" />
          <span>下载iPhone版</span>
        </div>
        <div class="nav-item">
          <span class="iconfont icon-windows-fill" />
          <span>下载其他版本</span>
        </div>
      </div>
    </div>

    <div class="hot-music">
      <h1>推荐歌单</h1>
      <span class="actived">每日推荐</span>
      <span>翻唱</span>
      <span>网络</span>
      <span>伤感</span>
      <span>欧美</span>
      <span class="much" @click="tosonglist">更多
      </span>
        <i class="iconfont icon-xiangyoujiantou youjiantou" />

    </div>

    <div id="mv-container">
      <div class="image-list">
        <div v-for="item in tuijiansong"
             :key="item.id"
             class="image-item">
          <div class="bg-img">
            <img :src="item.img"
            @click="toplaymusic"
                 alt="">
            <div class="attr" />
          </div>
          <p>{{ item.name }}</p>
          <span><i class="iconfont icon-24gl-play"></i>{{ item.total }}万</span>
        </div>
      </div>
    </div>

    <div class="rank-list">
      <div class="rank-header">
        <h1>排行榜</h1>
        <span class="more"
              @click="torank">更多</span>
        <span class="iconfont icon-xiangyoujiantou youjiantou" />
      </div>

      <div class="rank-content">
        <div class="rank-item">
          <div v-for="item in singerlist"
               :key="item.id"
               class="rank-img">
            <img :src="item.pic"
                 alt="">
          </div>
        </div>
        <div class="rank-box">
          <div v-for="item in singerlist"
               :key="item.id"
               class="rank-box1">

            <div v-for="it,index in item.musicList.slice(0,5)"
                 :key="it.albumid"
                 class="box-content">
              <div class="content-left">
                <h2>{{ index+1 }}</h2>
              </div>
              <div class="content-right">
                <p class="qingtian">{{ it.album }}</p>
                <p>{{ it.artist }}</p>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
    <div class="recommend-singer">
      <div class="singer-header">
        <h1>歌手推荐</h1>
        <span class="actived">华语</span>
        <span>欧美</span>
        <span>日韩</span>
        <span>组合</span>
        <span class="much"
              @click="toartist">更多<i class="iconfont icon-xiangyoujiantou youjiantou" /></span>

      </div>
      <div class="singer-container"
           @click="tosinger">
        <div class="singer-item">
          <img src="https://img1.kuwo.cn/star/starheads/300/20/78/4151863057.jpg"
               alt="">
          <p>张韶涵</p>
          <span>725首歌</span>
        </div>
        <div class="singer-item">
          <img src="https://img1.kuwo.cn/star/starheads/300/10/6/294045140.jpg"
               alt="">
          <p>周杰伦</p>
          <span>1736首歌</span>
        </div>
        <div class="singer-item">
          <img src="https://img4.kuwo.cn/star/starheads/300/23/6/1897539410.jpg"
               alt="">
          <p>陈奕迅</p>
          <span>3012首歌</span>
        </div>
        <div class="singer-item">
          <img src="https://img3.kuwo.cn/star/starheads/300/24/16/643388846.jpg"
               alt="">
          <p>林俊杰</p>
          <span>1138首歌</span>
        </div>
        <div class="singer-item">
          <img src="https://img2.kuwo.cn/star/starheads/300/72/81/4013293897.jpg"
               alt="">
          <p>周深</p>
          <span>1072首歌</span>
        </div>
        <div class="singer-item">
          <img src="https://img3.kuwo.cn/star/starheads/300/24/30/3366290598.jpg"
               alt="">
          <p>小阿枫</p>
          <span>829首歌</span>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { reqGetRecommendSong } from '../../api/recommend'
import { reqGetBannerList } from '../../api/recommend'
import { reqGetRanksinger } from '../../api/recommend'
import Swiper from 'swiper'
export default {

  name: 'Recommend',
  // props: ['data'],
  data () {
    return {
      recommendsong: '',
      bannerlist: '',
      singerlist: ''
      // singerInfo: ''
    }
  },
  computed: {
    tuijiansong () {
      return this.recommendsong.list && this.recommendsong.list.slice(0, 5)
    }
  },
  watch: {
    bannerlist () {
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          loop: true,
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable: true // 单击小圆点也可以实现切换
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          autoplay: true
          // 如果需要滚动条
          // scrollbar: '.swiper-scrollbar',
        })
      })
    }
  },
  async mounted () {
    const result = await reqGetRecommendSong()
    console.log(result)
    if (result.code === 200) {
      this.recommendsong = result.data
      // return result.data
    }

    const result2 = await reqGetBannerList()
    console.log(result2)
    if (result2.code === 200) {
      this.bannerlist = result2.data
    }

    const result3 = await reqGetRanksinger()
    console.log(result3)
    if (result3.code === 200) {
      this.singerlist = result3.data
    }


  },
  methods: {
    torank () {
      this.$router.push('/rank')
    },
    tosinger () {
      this.$router.push('/singer')
    },
    tosonglist () {
      this.$router.push('/songlist')
    },
    toartist () {
      this.$router.push('/singer')
    },
    toplaymusic (){
      this.$router.push('/playmusic')

    }
  }

}
</script>

<style lang="less" scoped>
.actived {
  font-weight: 600;
}
.much {
  height: 39px;
  line-height: 39px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 0;
  text-align: center;
}
.swiper-container {
  width: 1288px;
  height: 473px;
  margin: 20px auto;
}
.swiper-wrapper {
  img {
    width: 1288px;
    height: 373px;
  }
}
h1 {
  display: inline;
  font-size: 28px;
}
h3 {
  display: inline;
  height: 39px;
  line-height: 39px;
}
.hot-music {
  width: 700px;
  display: flex;
  margin-top: -40px;
  align-items: center;
  h1 {
    margin-right: 30px;
  }
  span {
    height: 39px;
    line-height: 39px;
    font-size: 14px;
    margin-right: 30px;
  }
}

.youjiantou {
  height: 39px;
  line-height: 39px;
  margin-right: 10px;
  cursor: pointer;
}
/* 推荐歌单 */
img {
  margin-right: 0;
  margin-top: 0;
}
span {
  padding-left: 0;
}
ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  font-size: 14px;
  li {
    list-style: none;
    margin-right: 20px;
    padding: 6px 16px;
    border-radius: 15px;
  }
}
#mv-container {
  width: 1300px;
  height: 100%;
  margin: 0 auto;
  // margin-top: 30px;
}
p {
  margin: 0;
  width: 242.79px;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.active {
  font-weight: 700;
  background-color: #ffe443;
}
.image-list {
  margin-top: 10px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  cursor: pointer;
  .image-item {
    box-sizing: border-box;
    padding-bottom: 20px;
    padding-top: 20px;
    .bg-img {
      position: relative;
      width: 100%;
      height: 242.79px;
      width: 242.79px;
      overflow: hidden;
    }
    img {
      width: 220px;
      height: 100%;
      transition: transform 1s;
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
    .attr {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 999;
      display: flex;
      justify-content: space-between;
      span {
        color: #fff;
      }
    }
    & > p {
      font-size: 18px;
      color: #333;
      margin: 15px 0 4px 0;
      font-weight: 600;
    }
    & > span {
      font-size: 14px;
      color: #aaa;
    }
  }
}
/* 排行榜 */
.rank-header {
  margin-top: 60px;
  .more {
    margin-left: 40px;
    font-size: 13px;
    color: #999999;
    cursor: pointer;
  }
}
.rank-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.rank-img {
  img {
    width: 242.79px;
    height: 133.04px;
    overflow: hidden;
    opacity: 0.7;
    margin-top: 30px;
  }
}
.rank-box {
  width: 1288px;
  height: 376px;
  // border: 1px solid rgb(213, 201, 201);
  display: flex;
  justify-content: space-around;
  .rank-box1 {
    width: 242.76px;
    height: 376px;
    border-left: 1px solid whitesmoke;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 30px;
    .box-content {
      height: 46px;
      width: 100px;
      display: flex;
      .content-left {
        width: 100px;
        height: 46px;
        line-height: 46px;
      }
      .content-right {
        height: 46px;
        width: 160px;
        margin-left: 10px;
        .qingtian {
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
        }
        p {
          margin-top: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: ccc;
          cursor: pointer;
        }
      }
    }
  }
}
.recommend-singer {
  height: 350px;
  margin-top: 50px;
  .singer-container {
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    justify-content: space-between;
    .singer-item {
      width: 16%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 0 50px 0;
      margin-top: 30px;
      img {
        width: 166px;
        border-radius: 50%;
      }
      p {
        padding: 10px;
        font-size: 16px;
        text-align: center;
      }
      span {
        color: #999;
      }
    }
  }
  .singer-header {
    display: flex;
    width: 500px;
    align-items: center;
    span {
      margin-left: 30px;
      font-size: 14px;
    }
  }
}

.swiper-button-prev {
  position: absolute;
  top: 40%;
  left: 50px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  color: white;
  transform: translateY(-50%);
}
.swiper-button-next {
  position: absolute;
  top: 40%;
  right: 50px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  color: white;
  opacity: 0.5;
  border-radius: 50%;
}
/deep/ .swiper-pagination-bullet-active {
  background-color: #fff;
}
.swiper-pagination {
  position: absolute;
  top: 280px;
  font-size: 30px;
  left: -30px;
}
.nav-download {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 98px;
  width: 1288px;
  height: 60px;
  border-top: 1px solid transparent;

  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  .nav-item {
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    span {
      margin-left: 10px;
    }
  }
}
</style>
